<template>
  <div id="mycollection">
    <div class="top-tip">温馨提示：向左滑动可以编辑和删除哦~</div>
    <!-- 使用van-list -->
    <van-list
      v-model="loading"
      :finished="finished"
      @load="listRoll"
      :offset="offset"
      :immediate-check="isCheck"
    >
      <div
        class="linebox"
        v-for="(item, index) in listData"
        :key="index"
        @click="gotoDetail(item)"
      >
        <van-swipe-cell :right-width="150" :left-width="0">
          <img class="collectionImg" :src="item.head_img" alt="" />
          <div class="collectionTxt">
            <p class="title">{{ item.title }}</p>
            <span class="price">￥{{ item.price }}</span>
            <span class="stock" v-if="item.state == 4 && lang == 'zh'"
              >已下架</span
            >
            <span class="stock" v-if="item.state == 4 && lang == 'en'"
              >down</span
            >
          </div>
          <!-- 0草稿，1已支付审核费，2审核通过上架，3审核不通过，4下架 -->
          <!-- <img class="flowstate" v-show="item.state == 0" src="http://img.zuimeng.net.cn/my/zhihuanzhong@2x.png" alt="置换中">
                        <img class="flowstate" v-show="item.state == 1" src="http://img.zuimeng.net.cn/my/goumaizhong@2x.png" alt="购买中"> -->
          <img
            class="flowstate"
            v-show="item.state == 1 && lang == 'zh'"
            src="http://img.zuimeng.net.cn/my/shenhezhong@2x.png"
            alt="审核中"
          />
          <img
            class="flowstate"
            v-show="item.state == 1 && lang == 'en'"
            src="http://img.zuimeng.net.cn/image/jpg/engshenhezhong_eng@2x.png"
            alt="Audit"
          />
          <span
            v-show="item.state != 4 && lang == 'zh'"
            slot="right"
            class="edit"
            @click="gotoedit(item.id)"
            >编辑</span
          >
          <span
            v-show="item.state != 4 && lang == 'en'"
            slot="right"
            class="edit"
            @click="gotoedit(item.id)"
            >edit</span
          >
          <span
            v-show="lang == 'zh'"
            slot="right"
            class="del"
            @click="gotodel(item.id)"
            >删除</span
          >
          <span
            v-show="lang == 'en'"
            slot="right"
            class="del"
            @click="gotodel(item.id)"
            >delete</span
          >
        </van-swipe-cell>
      </div>
    </van-list>
    <div
      class="nolist"
      v-show="lang == 'zh'"
      v-if="finished && dataLength != 0"
    >
      没有更多数据
    </div>
    <div
      class="nolist"
      v-show="lang == 'en'"
      v-if="finished && dataLength != 0"
    >
      no more data
    </div>

    <div class="nolist" v-show="lang == 'zh'" v-if="dataLength == 0">
      暂无藏品，快去发布藏品吧！
    </div>
    <div class="nolist" v-show="lang == 'en'" v-if="dataLength == 0">
      nothing in list，go to public collection！
    </div>
  </div>
</template>
<script>
import { Toast, List, SwipeCell, Loading, Dialog } from "vant";
import { getCollectionList, postDelcollection } from "@/api/my/collection";
export default {
  name: "mycollection",
  //声明组件
  components: {
    [Loading.name]: Loading,
    [Toast.name]: Toast,
    [List.name]: List,
    [SwipeCell.name]: SwipeCell,
    [Dialog.name]: Dialog,
  },
  data() {
    return {
      lang: "zh",
      pageIndex: 1, //分页页数
      pageSize: 10, //分页条数
      userId: 0, //用户ID
      offset: 50,
      loading: false, //是否正在加载
      finished: false, //是否加载完整
      isCheck: false, //是否一开始检查滚动
      dataLength: 0, //数据listData长度
      flowstate: [
        "http://img.zuimeng.net.cn/my/shenhezhong@2x.png",
        "http://img.zuimeng.net.cn/my/zhihuanzhong@2x.png",
        "http://img.zuimeng.net.cn/my/goumaizhong@2x.png",
      ],
      listData: [], //列表数据
    };
  },
  //实例创建完成后被立即调用
  created() {
    //获取用户ID
    this.getUserId();
    //获取语言环境
    this.getLang();
    //获取列表
    this.getmyCollection();
  },
  //监听
  watch: {},
  //计算属性
  computed: {},
  //
  methods: {
    //获取用户ID
    getUserId() {
      if (this.$route.query.userId && this.$route.query.userId > 0) {
        this.userId = this.$route.query.userId;
      } else {
        //获取缓存内的用户ID
        this.userId = window.localStorage.getItem("userId");
      }
    },
    //获取语言环境
    getLang() {
      if (this.$route.query.lang) {
        this.lang = this.$route.query.lang;
      }
    },
    //滚动加载数据
    listRoll() {
      let _this = this;
      _this.pageIndex++;
      _this.getmyCollection();
    },
    //获取藏品信息
    getmyCollection() {
      let that = this;
      getCollectionList(
        that.userId,
        that.pageIndex,
        that.pageSize,
        that.lang
      ).then((res) => {
        if (res.code == 200) {
          if (res.data.total > 0) {
            var list = res.data.list;
            for (var i = 0; i < list.length; i++) {
              if (list[i].state != 3 && list[i].stock != 0) {
                //我的藏品列表不显示审核不通过和库存为0的藏品
                that.listData = that.listData.concat(list[i]);
              }
            }
            console.log(that.listData, "listdata");
            that.loading = false;
          } else {
            that.finished = true;
            that.loading = false;
          }
          if (that.pageIndex == 1 && res.data.total < that.pageSize) {
            that.finished = true;
            that.loading = false;
          } else if (that.listData.length == res.data.total) {
            that.finished = true;
            that.loading = false;
          }
          that.dataLength = that.listData.length;
          console.log(that.dataLength);
        } else {
          Toast(res.msg);
        }
      });
    },
    //跳转到详情
    gotoDetail(item) {
      if (item.state == 1) {
        //审核中  无法查看详情
      } else {
        let id = item.id; //id
        let para = {};
        para.id = id; //藏品详情详情id (返回首页 此参数没有)
        para.HideFootBar = true;
        para.linkType = "goodsDetail";
        para.lang = this.lang; //显示网页语言类型 zh中文 en英文
        this.interaction.hLinkToApp(para);
      }
    },
    //去编辑
    gotoedit(id) {
      //调用原生的发布（已编辑）页面
      let para = {};
      para.id = id; //藏品id (返回首页 此参数没有)
      para.linkType = "publish";
      console.log(para);
      this.interaction.hLinkToApp(para);
    },
    //删除我的藏品
    gotodel(goodsId) {
      var message = "";
      var confirm = "确认";
      var cancel = "删除";
      if (this.lang == "zh") {
        message = "是否永久删除该藏品？";
      } else {
        message = "Permanently delete the collection?";
        confirm = "confirm";
        cancel = "cancel";
      }
      Dialog.confirm({
        title: "",
        message: message,
        confirmButtonText: confirm,
        cancelButtonText: cancel,
      })
        .then(() => {
          // on confirm
          postDelcollection(this.userId, goodsId, this.lang).then((res) => {
            if (res.code == 200) {
              this.listData = [];
              this.getCollectionList();
            } else {
              Toast(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="stylus" scoped>
#mycollection{
    .top-tip{
        width :100%;
        height :auto;
        padding: .266667rem ;
        text-align :center;
        font-family: PingFangSC-Regular;
        font-size: 0.373333rem;
        color: #FF9405;
        letter-spacing: 0.008rem;
        background :#FFF2E1;
    }
}
*{
    box-sizing :border-box;
}
.nolist{
    width :100%;
    height :auto;
    padding: .266667rem ;
    text-align :center;
    font-family: PingFangSC-Regular;
    font-size: 0.373333rem;
    color: #a2a2a2;
    letter-spacing: 0.008rem;
}
.linebox{
    width:100%;
    height :2.666667rem;
    line-height :2.666667rem;
    background-color :#ffffff;
    border-bottom :.026667rem solid #f1f1f1;
    padding :.266667rem;
    position :relative;
    .flowstate{
        position: absolute;
        z-index: 999999;
        left: 0;
        top: 0;
        width:1.28rem;
        height:.72rem;
    }
    .collectionImg{
        width :23%;
        height :2.133333rem;
        display :inline-block;
        float :left;
    }
    .collectionTxt{
        width :73%;
        height :2.133333rem;
        margin-left :.32rem;
        float :left;
        .title{
            width :100%;
            height :1.066667rem;
            font-family:PingFangSC-Regular;
            font-size:.373333rem;
            color:#494949;
            letter-spacing:.008rem;
            line-height:.533333rem;
            text-align:left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .price{
            float :left;
            line-height:.533333rem;
            margin-top :.586667rem;
            font-family:PingFangSC-Medium;
            font-size:.346667rem;
            color:#cb9c57;
            letter-spacing:0;
            text-align:left;
        }
        .stock{
            margin-top :.586667rem;
            font-family:PingFangSC-Medium;
            font-size:.346667rem;
            line-height:.533333rem;
            float:right;
            color :#d84053 !important;
        }
    }
    .edit{
        display :inline-block;
        position: absolute;
        top: 50%;
        left :.266667rem;
        margin-top: .533333rem;
        width :1.733333rem;
        height :1.066667rem;
        line-height :1.066667rem;
        text-align :center;
        font-size :.4rem;
    }
    .del{
        display :inline-block;
        position: absolute;
        top: 50%;
        left:2.266667rem;
        margin-top: .533333rem;
        width :1.733333rem;
        height :1.066667rem;
        line-height :1.066667rem;
        text-align :center;
        font-size :.4rem;
        color :#fff;
        background-color :red;
    }
}
</style>
